<template>
	<view class="content">
		<view class="form">
			<view class="inputWrapper">
				<input class="input" type="text" placeholder="请输入想要找回的用户名" @input="input_account" />
				<view class="warn">{{warn}}</view>
			</view>
			<view v-if="check" class="loginBtn" @click="fogetPswd" hover-class="loginBtn2">
				<text class="btnText">提交</text>
			</view>
			<view v-else class="loginBtn" style="background-color: #a0cfff;">
				<text class="btnText">提交</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: "",
				warn: "",
				check: false,
			}
		},
		onShow() {
			
		},
		methods: {
			input_account(value) {
				let that = this;
				this.check = false;

				if (value.detail.value == '') {
					//弹出错误提示
					this.warn = '用户名不能为空';
				} else {
					if (value.detail.value.length >= 3 &&
						value.detail.value.length <= 8) {
						//检测用户名
						let Name = /^(?=.*[^\da-zA-Z\s]).{3,8}$/
						console.log(Name.test(value.detail.value));
						if (Name.test(value.detail.value)) {
							//存在非法字符
							this.warn = '用户名不应包含特殊字符';
						} else {
							this.name = value.detail.value;
							this.warn = "";
							this.check = true;
						}
					} else {
						//弹出错误提示
						if (value.detail.value.length < 3)
							this.warn = '用户名过短,应为3-8位';
						else
							this.warn = '用户名过长,应为3-8位';
					}
				}
			},
			fogetPswd() {
				console.log(this.name);
				let that = this;
				//请求密保问题
				uni.request({
					url: 'http://192.168.5.3:9091/api/getQuestion',
					// url: 'http://127.0.0.1:4523/m1/2888201-0-default/api/getQuestion',
					method: 'POST',
					data:{
						username: this.name,
					},
					success:(res) => {
						//账号存在
						console.log(res.data.code);
						if(res.data.code == 200){
							//存储密保问题到本地
							uni.setStorage({
								key: 'question',
								data: res.data.question, 
								success: function () {
									console.log('密保问题存储成功');
								}
							});
							//储存用户名到本地
							uni.setStorage({
								key: 'name',
								data: this.name, 
								success: function () {
									console.log('用户名存储成功');
								}
							});
							//跳转到密保以及修改密码页面
							uni.redirectTo({
								url: "/pages/forgetPasswords/NewPassword/NewPassword",
							});
						}else{
							this.warn = "用户不存在";
							uni.showToast({
								title:"用户不存在",
								icon: "error",
							})
						}
					},
					fail() {
						uni.showToast({
							title:"链接失败",
							icon: "error",
						})
					}
				})

			}
		}
	}
</script>

<style>
	.content {
		width: 100vw;
		height: 100vh;
		background-color: #f7f8fa;
	}

	.avatorWrapper {
		height: 30vh;
		width: 100vw;
		display: flex;
		justify-content: center;
		align-items: center;

	}

	.avator {
		width: 300rpx;
		height: 300rpx;
		padding: 10rpx;
		background-color: #2b85e4;
		overflow: hidden;

	}

	.avator .img {
		width: 100%
	}

	.form {
		padding: 50upx 100upx;

	}

	.inputWrapper {
		width: 100%;
		height: 80upx;
		background: white;
		border-radius: 20px;
		box-sizing: border-box;
		padding: 0 20px;
		margin-top: 25px;
		background-color: #c8c9cc;

	}

	.inputWrapper .input {
		width: 100%;
		height: 100%;
		text-align: center;
		font-size: 15px;

	}

	.loginBtn {
		width: 100%;
		height: 80upx;
		background: #2979ff;
		border-radius: 50upx;
		margin-top: 30px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.loginBtn2 {
		width: 100%;
		height: 80upx;
		background: #716cff;
		border-radius: 50upx;
		margin-top: 30px;
		display: flex;
		justify-content: center;
		align-items: center;
}	

	.bottomBTN {

		width: 100%;

	}

	.loginBtn .btnText {
		color: white;

	}

	.forgotBtn {
		float: left;
		text-align: center;
		color: #2b85e4;
		font-size: 15px;
		margin: 10px;

	}

	.warn {
		color: #fa3534;
		font-size: 15rpx;
		float: inherit;
		margin: 0px;
	}
</style>